<template>
	<view class="detail_operation_main">
		<view class="fun">
			<view class="fun_btn">
				<image class="image" src="../../../static/img/common/customer.svg" alt="" />
				<text class='text-1' >客服</text>
			</view>
			<view class="fun_btn">
				<image class="image" src="../../../static/img/common/shop.svg" alt="" />
				<text class='text-1' >店铺</text>
			</view>
			<view class="fun_btn" @click="goCart">
				<uni-badge class="uni-badge-left-margin" :text="goodsNum" absolute="rightTop" size="small"
					style="z-index: 1;">
					<image class="image" src="../../../static/img/common/cart.svg" alt="" />
				</uni-badge>
				<text class='text-1' >购物车</text>
			</view>
		</view>
		<view class="fun_btn2">
			<view class="cart" @click="$refs['selection'].open('bottom'), (type = 0)">
				<text class='text-1' >加入购物车</text>
			</view>
			<view class="buy" @click="$refs['selection'].open('bottom'), (type = 1)">
				<text class='text-1' >立即购买</text>
			</view>
		</view>

		<uni-popup ref="selection" background-color="#fff">
			<view class="drawerBar">
				<view class="row-1">
					<view class="view">
						<image class="image" :src="cover" alt="" />
						<view class="price">{{ formatePrice }}</view>
					</view>
					<view class="closeBtn" @click="$refs['selection'].close()">×</view>
				</view>
				<view class="row-3">
					<view class="text view">数量</view>
					<view class="count view">
						<view class="view" :class="isForbidMin" @click="count--">-</view>
						<view class="view">{{ count }}</view>
						<view :class="isForbidMax" class="view" @click="count++">+</view>
					</view>
				</view>
				<view class="btn" @click="addGood">确定</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	export default {
		props: {
			cover: {
				type: String,
				default () {
					return "";
				},
			},
			price: {
				type: String,
				default () {
					return "";
				},
			},
		},
		data() {
			return {
				ifStar: false,
				drawer: false,
				count: 1,
				type: 0,
			};
		},
		computed: {
			...mapState(["goodsNum"]),
			formatePrice() {
				return parseFloat(this.price).toFixed(2);
			},
			isForbidMin() {
				return this.count <= 1 ? "forbid" : "";
			},
			isForbidMax() {
				return this.count <= 99 ? "" : "forbid";
			},
		},
		methods: {
			goCart() {
				// this.$router.push({
				// 	path: "/cart"
				// });
				uni.switchTab({
					url: "/pages/cart/Cart"
				})
			},
			addGood() {
				this.$refs['selection'].close()
				if (this.type === 0) {
					this.$emit("addShop", this.count);
				} else {
					this.$emit("buyNowGood", this.count);
				}
				this.drawer = false;
			},
			isActive(index) {
				return this.idx == index ? "active" : "";
			},
		},
	};
</script>
<style lang="scss" scoped>
	.detail_operation_main {
		height: 7.4vh;
		font-size: 1rem;
		position: fixed;
		bottom: 0;
		width: 100%;
		display: flex;
		background-color: white;
		z-index: 4;
	}

	.fun {
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 40%;
	}

	.text-1 {
		display: block;
	}

	.fun_btn {
		display: grid;
		justify-items: center;
		font-size: 32rpx;
		color: grey;
		position: relative;
	}

	.image {
		height: 36rpx;
		width: 36rpx;
	}

	.fun_btn2 {
		display: flex;
		align-items: center;
		justify-content: space-around;
		color: white;
		width: 60%;
		font-size: 2vh;
		font-weight: 800;
		padding: 0 10rpx;
	}

	.buy {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 6vh;
		border-radius: 3vh;
		width: calc(50% - 20rpx);
		background-color: #fcbc0c;
	}

	.cart {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 6vh;
		border-radius: 3vh;
		width: calc(50% - 20rpx);
		background-color: #f4200c;
	}

	.drawerBar {
		display: flex;
		flex-direction: column;
		width: 100vw;
	}

	.row-1 {
		padding-top: 20rpx;
		padding-left: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		/* #ifdef H5 */
		gap: 20rpx;
		/* #endif */
		position: relative;
	}

	.closeBtn {
		width: 40rpx;
		height: 40rpx;
		top: 20rpx;
		right: 20rpx;
		border-radius: 50%;
		background-color: rgb(192, 192, 192);
		line-height: 40rpx;
		text-align: center;
		font-size: 36rpx;
		position: absolute;
	}

	.text {
		padding-left: 20rpx;
	}

	.row-1 .view:nth-child(1) {
		padding-left: 20rpx;
		display: flex;
		align-items: flex-end;
		/* #ifdef H5 */
		gap: 20rpx;
		/* #endif */
	}

	.row-1 .image {
		width: 160rpx;
		height: 160rpx;
		border-radius: 10rpx;
	}

	.row-2 {
		padding: 10rpx 20rpx;
	}

	.row-3 {
		padding: 10rpx 20rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.count {
		display: flex;
		align-items: center;
		font-weight: 600;
		height: 80rpx;
	}

	.count .view:nth-child(2) {
		width: 60rpx;
		display: flex;
		justify-content: center;
		background-color: rgb(194, 194, 194);
	}

	.count .view:not(:nth-child(2)) {
		width: 60rpx;
		display: flex;
		justify-content: center;
	}

	.row-3 .view:nth-child(2) {
		display: flex;
		flex-direction: row;
	}

	.price {
		color: red;
		font-size: 32rpx;
	}

	.btn {
		width: 90vw;
		background-color: rgb(242, 36, 13);
		text-align: center;
		line-height: inherit;
		color: white;
		margin: 0 auto;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 35px;
		margin-bottom: 20rpx;
	}

	.forbid {
		pointer-events: none;
		color: gray;
	}

	.active {
		border: 2rpx solid rgb(245, 93, 74);
		color: rgb(242, 39, 12);
		background-color: rgb(252, 237, 235);
	}
</style>
